
<template>
  <div class="download" v-if="share">
    <div class="download-left">
      <div class="download-logo">
        <img src="./../../../assets/image/growthReport/appicon.png">
      </div>
      <div class="download-text">
        <p>升学在线</p>
        <span>成长相伴</span>
      </div>
    </div>
    <div class="download-right">
      <img class="down" v-on:click="down" src="./../../../assets/image/growthReport/Group6.png">
      <img class="close" v-on:click="close" src="./../../../assets/image/growthReport/share_icon_guanbi.png">
    </div>
  </div>
</template>

<script>
    export default {
        name: 'downLoad',
        data () {
            return {
              share:this.hasShare
            }
        },
        props: {
          hasShare: ''
        },
        created() {
        },
        methods: {
          down: function () {
            window.location = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.sx985.am'
          },
          close: function () {
            this.share = false
          },
        }
    }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  @import "./../../../styles/mixin.scss";
  .download {
    width: 100%;
    position: fixed;
    bottom: px2rem(0);
    z-index: 9;
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: px2rem(20);
    height: px2rem(100);
    border-top: px2rem(1) solid #ddd;
    .download-left {
      margin-left: px2rem(30);
      display: flex;
      .download-logo {
        img {
          width: px2rem(80);
          height: px2rem(80);
        }
      }
      .download-text {
        line-height: px2rem(40);
        margin-left: px2rem(15);
        p {
          font-size: px2rem(28);
        }
        span {
          font-size: px2rem(20);
        }
      }
    }
    .download-right {
      margin-right: px2rem(50);
      display: flex;
      flex-direction: row;
      .down {
        width: px2rem(160);
        height: px2rem(56);
        margin-right: px2rem(20);
      }
      .close {
        width: px2rem(32);
        height: px2rem(32);
        position: relative;
        top: px2rem(10);
      }
    }
  }
</style>
